<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--jq-->
    <script src="jquery/jquery.js"></script>

    <!--
    ztree.all=core+check+editor
    -->
    <!--<script src="static/jquery.ztree.core.js"></script>-->
    <script src="ztree/jquery.ztree.all-3.5.js"></script>
    <script src="vue/vue.js"></script>

    <!--ztree提供多种样式风格  也可以自定义-->
    <!--<link rel="stylesheet" href="static/ztree/zTreeStyle.css">-->
    <link rel="stylesheet" href="ztree/metro.css">
</head>
<body>
<div id="treeDiv" style="height: 100px;">
    <input style="width: 100px;" @focus="showTree(true)" v-model="name" />
    <ul id="treeDemo" class="ztree" v-show="isShow" >

    </ul>
</div>
</body>
</html>
<script>

    new Vue({
        el:'#treeDiv',
        /**
         * data变成函数对象调用来生成
         * 首先不饿对象初始化后，在调用vue对象调用data声明的匿名函数来创建data对象
         * @returns {{nodes: [{name: string, pId: number, id: number, title: string, open: boolean},{name: string, pId: number, id: number},{name: string, pId: number, id: number, title: string},{name: string, pId: number, id: number},{name: string, pId: number, id: number},null,null], name: string, isShow: boolean, setting: {data: {simpleData: {enable: boolean}, key: {title: string}}, callback: {onClick: *}}}}
         */
        data:function () {
            return {
                name:'',
                isShow:false,
                setting: {  //ztree的配置对象
                    data: {//ztree的数据配置对象
                        simpleData: { //设置简单节点数组配置
                            enable:true //默认为false 设置true表示节点数组可以是一位结构
                        },
                        key:{
                            title:'title'
                        }
                    },
                    callback:{
                        onClick: this.onClick
                    }
                },
                nodes:[
                    //ztree的节点数组
                    {id:1,pId:0,name: '个人中心',open:true,title:'个人中心菜单'},
                    {id:2,pId:1,name: '我的资料'},//子节点中的父id必须与父id一致
                    {id:3,pId:0,name: '单位管理',title:'单位管理菜单'},
                    {id:4,pId:3,name: '单位信息'},
                    {id:5,pId:3,name: '单位账号'},
                    {id:6,pId:3,name: '电子台账'},
                    {id:7,pId:0,name: '系统管理',title:'系统管理菜单'}
                ]
            }
        },
        methods:{
            showTree:function (isShow) {
                this.isShow =isShow;

            },
            /**
             * ztree开发流程：
             * 1.声明配置setting对象
             * 2.声明配置setting对象
             * 3.根据配置节点和节点对象，创建ztree对象
             * $fn.zTree.init(需要挂载树的dom节点对象，配置对象，节点数组对象)
             * 树初始化方法
             */
            initTree:function (){
              let tree =  $.fn.zTree.init($('#treeDemo'),this.setting,this.nodes);
       /*         console.log(tree);
                console.log(tree.getNodes())*/
            },
            onClick: function (event,treeId,treeNode) {
         /*       console.log(event);//事件对象
                console.log(treeId);//id ul的id
                console.log(treeNode);//树的节点，触发点击事件的节点*/
                this.name = treeNode.name;
            }
        },
        //注意ul节点需要挂载到dom后，才能找到该节点 使用mounted生命周期方法
        mounted:function (){
            this.initTree();
        }
    })
</script>